<template>
	<view class="contener ">

		<skeleton :skeleton="skeleton" :loading="loading">
			<block>
				<view class="header">
					<view class="left " @tap="nearAddress">
						<image src="/static/images/home/weizhi.png" lazy-load mode="aspectFill"></image>
						<view>{{city}}</view>
					</view>
					<navigator :url="`./searchPage?type=${1}`" hover-class="navigator-hover" class="ipt">
						<uni-search-bar style="width: 70%;margin-left: -20rpx;"></uni-search-bar>
					</navigator>

					<view @click="goMsg('./msgList')">
						<uni-badge class="uni-badge-left-margin" :text="msgNum" absolute="rightTop" size="small">
							<uni-icons type="chatbubble" size="30" color="#4cd964"></uni-icons>
						</uni-badge>
					</view>

				</view>

				<view class="banner ">
					<uni-swiper-dot :info="bannerList" :current="currentBanner" class="swiperBig" field="title"
						:mode="mode">
						<swiper class="swiper" :autoplay="autoplay" @change="bannerChange" circular>
							<swiper-item v-for="(item ,index) in bannerList" :key="item.id"
								@click="linkOthers(item.url)">
								<navigator :url="item.url">
									<view class="swiper-item">
										<image lazy-load v-if="imgapi+item.path" :src="imgapi+item.path"
											class="swiperimg" mode="scaleToFill">
										</image>
									</view>
								</navigator>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>

				</view>

				<!-- <button @click="linkOthers()">12312332</button> -->


				<view class="listBox ">
					<view class="listBoxchirden">
						<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"
							activeColor="#4cd964">
						</uni-segmented-control>
						<view class="content">
							<view v-show="current === 2">
								<view class="contentChirden" @tap="tzdetails(item)" v-for="(item,index) in data"
									:key="index">
									<view class="">
										<image class="contentChirdenImg " :src="imgapi+item.avatar" mode="aspectFill"
											lazy-load>
										</image>
									</view>
									<view style="margin-left: 20rpx;">
										<view class="" style="font-weight: bold;">{{item.plotName}}</view>
										<block>
											<view style="margin: 15rpx 0;color: #333;font-size: 26rpx;" v-if="hasJuli">
												{{item.juli}}km
											</view>
											<view style="margin: 15rpx 0;color: red;font-size: 20rpx;" v-else>
												未获取到用户位置信息，无法获取距离。
											</view>
										</block>
										<view class="" style="color: #333;font-size: 26rpx;">{{item.address}}
										</view>
									</view>

								</view>
								<uni-load-more :status="status" :icon-size="14" :content-text="contentText" />
							</view>

							<view v-show="current === 0">
								<view class="contentChirden" @tap="tzdetails(item)" v-for="(item,index) in data"
									:key="index">
									<view>
										<image class=" contentChirdenImg" :src="imgapi+item.avatar" mode="aspectFill"
											lazy-load>
										</image>
									</view>
									<view style="margin-left: 20rpx;">
										<view style="font-weight: bold;">{{item.plotName}}</view>
										<view style="margin: 0 0 8rpx ;color: #333;font-size: 26rpx;" v-if="hasJuli">
											{{item.juli}}km
										</view>
										<view style="margin: 8rpx 0;color: red;font-size: 20rpx;" v-else>
											未获取到用户位置信息，无法获取距离
										</view>
										<view v-if="item.label" style="margin-bottom: 8rpx;">
											<uni-tag :text="val" :type="getType(i)" circle size="mini"
												v-for="(val,i) in JSON.parse(removeLine(item.label))" :key='val.id'
												style="margin-right: 10px;font-size: 3px;"></uni-tag>
										</view>
										<view style="color: #333;font-size: 26rpx;">{{item.address}}</view>
									</view>
								</view>
								<uni-load-more :status="status" :icon-size="14" :content-text="contentText" />
							</view>

							<view v-show="current === 1">
								<view class="contentChirden" @tap="tzdetails(item)" v-for="(item,index) in data"
									:key="index">
									<view>
										<image class="contentChirdenImg" :src="imgapi+item.avatar" mode="aspectFill"
											lazy-load></image>
									</view>
									<view style="margin-left: 20rpx;">
										<view style="font-weight: bold;">{{item.plotName}}</view>
										<view style="margin: 15rpx 0;color: #333;font-size: 26rpx;" v-if="hasJuli">
											{{item.juli}}km
										</view>
										<view style="margin: 15rpx 0;color: red;font-size: 20rpx;" v-else>
											未获取到用户位置信息，无法获取距离
										</view>
										<view style="color: #333;font-size: 26rpx;">{{item.address}}</view>
									</view>
								</view>
								<uni-load-more :status="status" :icon-size="14" :content-text="contentText" />
							</view>
						</view>
					</view>
				</view>

				<!-- @btnClick="btnClick" creatTop="525" creatLeft="325"  imageDong="../../static/renDong.png"-->
				<Drag @dragClick="dragClick" background="transparent" creatTop='500' image="/pageA/static/logo.png"
					imageWidth="84%" text="23333" :show="show"></Drag>


			</block>
		</skeleton>
		<!-- <skeleton :skeleton="skeleton" :loading="loading">
		        <view>好的，页面加载完了</view>
		</skeleton> -->
	</view>
</template>

<script>
	import config from "@/requset/config.js"
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	import Drag from '@/components/beyondGod-drag/beyoundGod-drag.vue'
	import permision from "@/js_sdk/wa-permission/permission.js"
	export default {
		components: {
			Skeleton,
			Drag,
		},
		data() {
			return {
				msgNum: 0,

				bannerList: [{
					src: '/static/banner.jpg',
					content: "图片说明"
				}, {
					src: '/static/banner.jpg',
					content: "图片说明"
				}], //轮播图数据
				imageList: [{
					src: '/static/cart.png',
					content: "图片说明"
				}, {
					src: '/static/cart2.png',
					content: "图片说明"
				}],
				autoplay: true,
				interval: 2000,
				indicatorDots: true,
				info: [{
					content: '内容 A'
				}, {
					content: '内容 B'
				}, {
					content: '内容 C'
				}],
				currentBanner: 0,
				mode: '',


				loading: true,
				skeleton: [
					'circle-sm+circle-sm+line-lg',
					'card-lg',
					'line-lg',
					40,
					'square+line-sm*3',
					'square+line-sm*3',
				], //骨架屏

				hasJuli: false,
				ifBottomRefresh: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '暂无更多~'
				},
				params: {
					pageNo: 1,
					pageSize: 10,
					url: "",
				},
				city: '定位',
				latitude: null,
				longitude: null,
				isopendingwei: null, //是否开启定位
				current: 0,
				items: ["全部", "采摘", "种植"],
				pageSize: null,
				pageNo: 1,
				imgapi: '',
				type: 2,

				data: [], //列表数据
				token: '',

				show: true, // 对话框弹出
			}
		},
		onShow() {
			uni.showLoading({
				title: "加载中"
			})
			this.$nextTick(function() {
				console.log("进入首页");
				this.latitude = uni.getStorageSync("dingwei").latitude
				this.longitude = uni.getStorageSync("dingwei").longitude
				setTimeout(() => {
					this.cleanList()
					this.getlist()
					uni.hideLoading()
				}, 500)
			})
			if (this.token) {
				this.getMsgNum()
			}
		},
		watch: {
			latitude(newName, oldName) {
				console.log('定位改变', newName);
				if (newName) {
					this.hasJuli = true

					this.getDistrict()
				}

			}
		},
		onLoad() {
			uni.showLoading({
				title: "加载中"
			})

			setInterval(() => {
				this.show = false
			}, 1000 * 60 * 10)

			this.checkOpenGps()

			this.token = uni.getStorageSync('token')
			console.log(this.token);
			// this.params.url = this.token ? "user/plot/plotList" : "user/public/plot/list"
			this.params.url = "user/plot/plotList"
			let that = this

			// 判断位置是否授权
			if (uni.getStorageSync("dingwei")) {
				this.hasJuli = true
			}
			this.getBanner()
			uni.hideLoading()
		},

		//触底加载状态
		onReachBottom() {
			if (this.status != 'noMore') {
				this.status = 'loading';
				this.ifBottomRefresh = true
				//正式服去掉这个延时器
				this.getlist()
			}
		},
		methods: {
			// 获取区级
			getDistrict() {
				this.$axios({
					url: "user/public/getArea",
					method: "post",
					data: {
						lng: this.longitude,
						lat: this.latitude
					}
				}).then((res) => {
					this.city = res.result.name
				})
			},

			// 判断是否开启gps
			checkOpenGps() {
				var that = this;

				wx.getSystemInfo({
					success(res) {
						that.isopendingwei = res.locationEnabled;
						if (that.isopendingwei == false) {
							uni.showToast({
								title: '请先开启手机GPS定位,然后重新刷新',
								icon: "none",
								duration: 3000,
							})
							return
						}

						that.getLocation()
					}
				})
			},

			// 获取定位
			getLocation() {
				let that = this
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.userLocation']) {
							// 未授权
							uni.authorize({
								scope: 'scope.userLocation',
								success() { //1.1 允许授权
									// uni.getLocation()
									wx.getSystemInfo({
										success(res) {
											that.isopendingwei = res.locationEnabled;
											if (that.isopendingwei == false) {
												uni.showToast({
													title: '请先开启手机GPS定位,然后重新刷新',
													icon: "none",
													duration: 3000,
												})
												return
											}
										}
									})
									if (!that.isopendingwei) {
										uni.showToast({
											title: '请先开启手机GPS定位,然后重新刷新',
											icon: "none",
											duration: 3000,
										})
										return
									}

									uni.showLoading({
										title: "加载中"
									})
									uni.getLocation({
										type: 'wgs84',
										geocode: true,
										success: function(res) {
											console.log(res);
											that.latitude = res.latitude
											that.longitude = res.longitude
											uni.setStorage({
												key: 'dingwei',
												data: {
													longitude: res.longitude,
													latitude: res.latitude
												},
											});
											console.log(111);
											that.cleanList()
											setTimeout(() => {
												that.getlist()
											}, 500)
										}
									});
								},
								fail() { //1.2 拒绝授权
									console.log("您拒绝将不能享受附近的土地服务")
									uni.navigateTo({
										url: './location'
									})
								}
							})
						} else {
							// 已授权 ..(获取位置信息)
						}
					},
				});
			},
			clickIpt() {
				console.log("点击搜索");
			},
			// 去除"\"
			removeLine(str) {
				return str.replace(/\\/g, "")
			},
			// 标签颜色
			getType(index) {
				switch (index) {
					case 0:
						return "success"
					case 1:
						return "default"
					case 2:
						return "warning"
					case 3:
						return "error"
				}
			},
			// 未读消息
			getMsgNum() {
				this.$axios({
					url: "user/info/unRead",
					method: "post",
					data: {}
				}).then((res) => {
					this.msgNum = res.result
				})
			},
			goMsg(url) {
				// 消息已读
				this.$axios({
					url: "user/info/allRead",
					method: "post",
					data: {}
				}).then((res) => {
					setTimeout(() => {
						uni.navigateTo({
							url
						})
					}, 500)
				})

			},
			// 悬浮按钮点击
			dragClick() {
				this.show = false
				console.log("点击悬浮按钮");
				uni.navigateTo({
					url: "./guideList"
				})
			},
			// 轮播图改变
			bannerChange(e) {
				this.currentBanner = e.detail.current;
			},
			// 跳转其他页面
			linkOthers(url) {
				if (!url) {
					return
				}
				console.log('url', url);
				// 此处填写你要跳转的绑定公众号文章的链接地址或者已经在小程序后台配置好业务域名的地址
				// var url = "https://www.baidu.com";	
				uni.navigateTo({
					// 此处的链接为小程序上面新建的webview页面路径，参数url为要跳转外链的地址
					url: "./linkOthers?url=" + encodeURIComponent('https://' + url)
				});
			},

			//获取轮播图
			getBanner() {
				this.$axios({
					url: "user/public/bannerList",
					method: "post",
					data: {
						pageNo: this.params.pageNo,
						pageSize: this.params.pageSize,
						type: 0,
					}
				}).then((res) => {
					this.bannerList = res.result.list
				})
			},
			//获取列表
			getlist() {
				this.$nextTick(function() {
					const that = this;

					this.imgapi = config.URLIMAGE
					this.$axios({
						url: 'user/plot/plotList',
						method: "post",
						data: {
							lng: this.longitude,
							lat: this.latitude,
							pageNo: this.params.pageNo,
							pageSize: this.params.pageSize,
							type: this.type,
						}
					}).then((res) => {

						//请求接口成功之后，判断加载状态，处理数据						
						if (res.result.pages >= this.params.pageNo) {
							if (this.ifBottomRefresh) {
								this.data = this.data.concat(res.result.list)
							} else {
								this.data = res.result.list
							}

						} else {
							this.status = 'noMore'
						}
						if (this.params.pageNo >= res.result.pages) {
							this.status = 'noMore'
						}
						this.params.pageNo++;

						// 骨架屏取消
						this.loading = false;
						uni.hideLoading()
					})
				})
			},
			//跳转详情
			tzdetails(e) {
				console.log('longitude', this.latitude)
				uni.navigateTo({
					url: `./localDetails?id=${e.id}&lat=${this.latitude}&lng=${this.longitude}`
				})
			},
			//定位
			nearAddress() {
				let _this = this
				wx.chooseLocation({
					success: (res) => {
						let city = res.address
						let that = _this
						that.latitude = res.latitude
						that.longitude = res.longitude
						uni.setStorage({
							key: 'dingwei',
							data: {
								longitude: res.longitude,
								latitude: res.latitude
							},
						});
						this.hasJuli = true;
						that.city = city.slice(3, 6)
						this.cleanList()
						this.getlist()
					},
					fail: (res) => {
						wx.showToast({
							title: '授权失败',
							icon: 'none',
							duration: 1000,
							success() {
								console.log(res);
								if (res.errMsg == "chooseLocation:fail auth deny") {
									uni.showModal({
										content: '检测到您没打开获取信息功能权限，是否去设置打开？',
										confirmText: "确认",
										cancelText: '取消',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting({
													success: (res) => {
														console.log('确定');
													}
												})
											} else {
												console.log('取消1');
												return false;
											}
										}
									})
								}

							}
						})
					},


				})
			},

			cleanList() {
				this.data = [];
				this.params = {
					pageNo: 1,
					pageSize: 10
				}
				const token = wx.getStorageSync('token')
				// this.params.url = token == "" ? "user/public/plot/list" : "user/plot/plotList"
				this.params.url = "user/plot/plotList"
				this.status = 'loading';
				this.ifBottomRefresh = true
			},
			//选项卡
			onClickItem(option) {
				this.current = option.currentIndex;
				console.log("this.current", this.current)
				this.type = this.current == 0 ? 2 : this.current == 1 ? 1 : 0
				this.cleanList();
				this.getlist()
			},
			clickLoadMore(e) {}

		}
	}
</script>

<style scoped>
	.ipt {
		width: 70%;
		line-height: 5rpx;
	}

	/deep/.uni-tag--success {
		background: linear-gradient(90deg, #89ae47, #6d9417);
	}

	/deep/.uni-tag--default {
		background: linear-gradient(90deg, #ce6248, #f77e81);
	}

	/deep/.uni-tag--warning {
		background: linear-gradient(90deg, #f6af6b, #b75f33);
	}

	/deep/.uni-tag--error {
		background: linear-gradient(90deg, #2ab0fe, #027aef);
	}

	/deep/.uni-tag--mini {
		font-size: 19rpx !important;
		display: inline-block;
		padding: 8rpx 18rpx !important;
		border: none !important;
	}

	/deep/.uni-searchbar {
		width: 100%;
	}

	.swiperBig {
		/* border-radius: 28rpx; */
		overflow: hidden;
		display: inline-block;
	}

	.swiper {
		width: 750rpx;
		/* border-radius: 28rpx; */
		overflow: hidden;
	}

	.swiperimg {
		width: 750rpx;
		height: 750rpx;
	}

	.header {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 0 25rpx 0 20rpx;
		align-items: center;
	}

	.left {
		font-size: 26rpx;
		float: left;
		height: 104rpx;
		line-height: 104rpx;
		color: #333;
		display: flex;
		align-items: center;
		align-items: center;
		z-index: 800;
	}

	.left image {
		width: 30upx;
		height: 30upx;
		float: left;
		margin-right: 6upx;
	}

	.banner {
		width: 750rpx;
		height: 295rpx;
		/* background-color: #FFf; */

	}

	.banner image {
		height: 350rpx;
		width: 100%;
	}

	.listBox {
		width: 750rpx;
		height: calc(100vh - 450rpx);
	}

	.listBoxchirden {
		width: 700rpx;
		margin: 35rpx auto;
	}

	.listBox .v-tabs {
		color: #3CC51F;
		activeColor: #3CC51F;
	}

	.content {
		width: 750rpx;
	}

	.contentChirden {
		width: 700rpx;
		height: 200rpx;
		background-color: #fff;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		margin-top: 15rpx;
	}

	.contentChirdenImg {
		width: 150rpx;
		height: 150rpx;
		border: 2rpx solid #EEEEEE;
	}

	.segmented-control__item--button.data-v-a00bd3e0 {
		height: 60rpx;
	}
</style>
